<template>
	<view class="page">
		<view class="Release_box">
			<form @submit="" @reset="">
				<view class="release_title">
					用户姓名：<input type="text" placeholder="请输入用户姓名" placeholder-style="font-size:32rpx;color:#B3B3B3" v-model="formData.name"
					 maxlength="15" />
				</view>
				<view class="release_title">
					联系电话：<input type="text" placeholder="请输入用户电话" v-model="formData.phone" placeholder-style="font-size:32rpx;color:#B3B3B3"
					 maxlength="15" />
				</view>
				<view class="release_postion" @click='handelAddress'>
					所在地区： <input type="text" placeholder="请选择" disabled="true"  v-model="formData.address" placeholder-style="font-size:32rpx;color:#B3B3B3"
					 maxlength="15" />
					<view class="position_icon">
						<uni-icons type="location-filled" size="20"></uni-icons>
					</view>
				</view>
				<view class="detailed">
					<view class="detailed_title">
						详细信息：
					</view>
					<view class="detailed_box">
						<textarea v-model="formData.addressDetail" placeholder="请填写详细地址,不少于5个字" />
						</view>
				</view>
				<view class="release_title release_switch">
					设置为默认地址：<switch checked class="switchChange fr" @change="switchChange" color="#368AFF" style="transform: scale(0.7,0.7)" />
				</view>
			</form>

		</view>
		<view class="bt">修改</view>
	</view>
</template>

<script>
	// 下拉列表框
	import lbPicker from "@/components/my/lb-picker";
	import area from "@/common/area-data-min.js"
	export default {
		components: {
			lbPicker
		},
		data() {
			return {
				// 引入的地区列表
				formData: {}
			}
		},
		// 获取需求大厅的需求名字
		onLoad() {},
		methods: {
			// 打开时间列表
			handelAddress () {
				uni.authorize({
					scope: 'scope.userLocation',
					success: () => {
						uni.getLocation({
							type: 'gcj02',
							success: (res) => {
								console.log(res)
								uni.chooseLocation({
									latitude: res.latitude,
									longitude: res.longitude,
									success: e => {
										console.log(e)
										this.$set(this.formData, 'address', e.name?e.name:e.address)
									},
									fail: function(t) {}
								});
							}
						});
					},
					fail(err) { // 这里用户点取消了
						uni.showToast({
							icon: 'none',
							title: '定位失败'
						})
					},
					complete() {
						// uni.hideLoading()
					}
				})
			},
			switchChange () {
				
			}
		}
	}
</script>

<style lang="scss">
	.page {
		overflow: hidden;
		background: #fff;
	}

	.Release_box {
		padding: 33rpx;
		box-sizing: border-box;
		margin-bottom: 50rpx;
		.release_title,
		.release_postion{
			position: relative;
			display: flex;
			padding-bottom: 33rpx;
			margin-bottom: 33rpx;
			color: #B3B3B3;
			font-size: 32rpx;
			border-bottom: 1px solid rgba($color: #999, $alpha: 0.2);
			input  {
				position: relative;
				z-index: 0;
				flex: 0 0 480rpx;
				width: 480rpx;
				color: #565656;
				font-size: 32rpx;
			}
			.position_icon {
				position: absolute;
				right: 0;
				top: 0;
				z-index: 1;
			}
		}

		.detailed {
			.detailed_title {
				color: #B3B3B3;
				font-size: 32rpx;
			}
			margin-bottom: 33rpx;
			.detailed_box {
				width: 100%;
				margin-top: 20rpx;
				textarea {
					width: 666rpx;
					margin-top: 20rpx;
					font-size: 26rpx;
					padding: 15rpx;
					color: #565656;
					font-size: 32rpx;
					border: 1px solid rgba($color: #999, $alpha: 0.2);
				}
			}

		}
		.release_switch {
			display: block;
			position: relative;
			top: -10rpx;
			border-bottom: none;
		}
	}

	.bt {
		width:683rpx;
		height:100rpx;
		margin: 0 auto ;
		line-height: 100rpx;
		text-align: center;
		background:rgba(54,138,255,1);
		border-radius:50rpx;
		border:1px solid rgba(151,151,151,.1);
		color: #fff;
		font-size: 36rpx;
	}

</style>
